<template>
  <div>
    <vhead />
    <nuxt />
    <backtop></backtop>
    <vfoot />
  </div>
</template>
<script>
import vhead from '~/components/head.vue'
import vfoot from '~/components/foot.vue'
import backtop from '~/components/backtop.vue'
export default {
  components: {
    vhead,
    vfoot,
    backtop
  },
  mounted(){
    window.addEventListener('scroll', this.scrollFn)
    let head = document.querySelector("head")
    head.innerHTML+="<meta baidu-gxt-verify-token='0866841feb60cebd546d03068c79ad31'>"
  },
  methods: {
    scrollFn(){
      let wtop = document.documentElement.scrollTop||document.body.scrollTop;
      let nav = document.getElementsByClassName("main-nav")
      let pageItem = document.getElementsByClassName("page-item-container")
      let pageContent = document.getElementsByClassName("page-content-flag")
      let mainBody = document.getElementsByClassName("main-body-flag")
      // console.log(wtop,mainBody[0].scrollHeight,mainBody[0].clientHeight)
      if(pageItem.length>0){
        if( wtop >=174) {
          pageItem[0].className="page-item-container fixed-page-item";
        }else{
          pageItem[0].className="page-item-container absolute-page-item";
        }
      }
      if(nav.length>0){
        nav[0].style.top = (mainBody[0].clientHeight-nav[0].clientHeight)+'px';
        if(wtop <244){
          nav[0].className="main-nav";
          nav[0].style.position='static';
        }
        else if( wtop >=244 && wtop <=pageContent[0].clientHeight-(nav[0].clientHeight+60)) {
          nav[0].className="main-nav fixed-nav";
        }else{
          nav[0].className="main-nav";
          nav[0].style.position='absolute';
          
        }
      }
    }
  }
}
</script>
<style>
@font-face {
  font-family: 'TMZD';
  src: url('../fonts/tmzd.ttf');
}
.titleFont{
  font-family: TMZD;
}
</style>
